<script>
export default {
  name: "base-button",
  props: {
    type: {
      type: String,
      default: 'primary', // primary、plain、only-text、ghost、danger
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    nativeType: {
      type: String,
      default: 'button'
    },
  },
  data() {
    return {}
  },
  methods: {
    buildTextButton() {
      const icon = this.icon;
      return (
        <span class="text-button" onClick={(e) => this.$emit('event', e)}>
          {icon && <i class={'iconfont ' + icon}></i>}
          {this.$slots.default}
        </span>
      )
    },
    buildBaseButton() {
      const icon = this.icon;
      const type = this.type;
      const nativeType = this.nativeType;
      const disabled = this.disabled ? 'disabled' : '';
      return (
        <button class={{
          'base-button': true,
          'plain-button': type === 'plain',
          'ghost-button': type === 'ghost',
          'danger-button': type === 'danger',
          'base-button-disabled': disabled && type === 'primary',
          'danger-button-disabled': disabled && type === 'danger',
          'plain-button-disabled': disabled && type === 'plain',
          'ghost-button-disabled': disabled && type === 'ghost',
        }} type={nativeType} disabled={this.disabled} onClick={(e) => this.$emit('event', e)}>
          {icon && <i class={'iconfont ' + icon}></i>}
          {this.$slots.default}
        </button>

      )
    },
  },
  render(r) {

    if (this.type === 'only-text') return this.buildTextButton();

    return this.buildBaseButton();
  }
}
</script>

<style lang="scss">

  $color-primary-light-1: $color-primary-light-1 !default;
  $color-primary-disabled: $color-primary-light-3 !default;
  $color-primary-light-9-disabled: $color-primary-light-2 !default;
  $text-color-primary-disabled: $color-primary-light-2 !default;
  
  $color-danger-light-1: mix(#fff, #f56c6c, 10%) !default;
  $color-danger-light-9: mix(#fff, #f56c6c, 90%) !default;
  $color-danger-disabled: rgba(#f56c6c, .3) !default;
  $color-danger-light-9-disabled: rgba(#f56c6c, .2) !default;
  // 主要按钮
  .base-button {
    padding: 5px 15px;
    background: $color-primary;
    color: #fff;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    outline: none;
    line-height: 24px;

    .iconfont {
      line-height: 12px;
      font-size: 12px;
      margin-right: 3px;
    }
    &:hover {
      background: $color-primary-light-5;
      color: #fff;
    }
  }

  .base-button-disabled {
    background: $color-primary-disabled;
    &:hover {
      background: $color-primary-disabled;
      cursor: not-allowed;
    }

  }

  // 次要按钮
  .plain-button {
    @include backgroundColorPrimaryLight9Important();
    color: $text-color-primary;
    padding: 5px 15px;
    &:hover {
      @include backgroundColorImportant();
    }
  }

  .plain-button-disabled {
    background: $color-primary-light-9-disabled;
    color: #fff;
    &:hover {
      background: $color-primary-light-9-disabled;
      cursor: not-allowed;
      color: $text-color-primary-disabled;
    }
  }
  // 危险红色按钮
  .danger-button {
    background: #f56c6c;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 6px 15px;
    &:hover {
      background: $color-danger-light-1;
      color: #fff;
    }

  }
  .danger-button-disabled {
    background: $color-danger-light-9-disabled;
    border-color: $color-danger-light-9-disabled;
    color: #fff;
    &:hover {
      background: $color-danger-light-9-disabled;
      cursor: not-allowed;
      color: #fff;
    }
  }
  // 背景白色按钮
  .ghost-button {
    background: #fff;
    color: $text-color-primary;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    padding: 4px 15px;
    &:hover {
      border-color: $color-primary;
    }

  }

  .ghost-button-disabled {
    opacity: .5;

    &:hover {
      background: #fff;
      border-color: #E2E2E2;
      color: $text-color-primary;
      cursor: not-allowed;
    }
  }

  // 文字按钮
  .text-button {
    display: inline-block;
    padding: 7px 15px;
    color: $text-color-primary;
    .iconfont {
      font-size: 12px;
      margin-right: 3px;
    }
    &:hover {
      cursor: pointer;
      @include fontColor();
    }
  }

</style>